<template>
    <div class="wrapper">
        <div class="inline-l">
            <h1>{{priceTitle}}元({{news.sendUserName}}，ID{{news.send_user}})</h1>
            <h1>{{news.title}}</h1>
            <p>{{news.created}}</p>
        </div>
        <div class="inline-r">
            <p>{{news.typeCh}}</p>
            <div class="character">
                <h1>{{priceInfo}}</h1>
                <span>元</span>
            </div>
        </div>
    </div>
</template>

<script type="text/ecmascript-6">
    export default {
        name: 'newsItem',
        props: {
            news: {
                type: Object
            }
        },
        created() {
           // console.log(1111, parseFloat(this.news.money));
        },
        filters: {
            labelTxt(val) {
                if (val === 'out') {
                    return '支';
                } else {
                    return '收';
                }
            }
        },
        computed: {
            priceTitle() {
                return parseFloat(this.news.money);
            },
           priceInfo() {
               return parseFloat(this.news.money);
           }
        },
        methods: {
            // goDetail() {
            //     this.$router.push({
            //         name: 'rebateOrderDetail',
            //         query: {
            //             getMoney: true,
            //             id: this.news.target_id
            //         }
            //     });
            // }
        }
    };
</script>

<style scoped lang="stylus" rel="stylesheet/stylus">
    @import "../../assets/stylus/main.styl";
    .wrapper {
        padding 3vw
        box-sizing border-box
        flex-x(center, flex-start);
        position relative
        .inline-l {
            flex: 3
            flex-y(flex-start, flex-start);
            & > h1 {
                margin-bottom 2vw
                width: 61vw;
                line-height 5.5vw
                multi(2);
            }
            & p {
                position absolute
                bottom 3vw
                left: 3vw
                word-tip();
            }
            .label{
                padding: 2px 3px;
                border-radius(4px);
                word-vw(14,main-color)
                margin-right 2vw
            }
        }
        .inline-r {
            flex: 1
            flex-y(center, flex-end);
            & p {
                word(vw(11), third-ash)
                margin-top 2vw
            }
            .character {
                overflow: hidden;
                width: vw(60)
                height: vw(60)
                background gradient-color
                color: white
                margin-top: 4vw;
                flex-y();
                & h1{
                    line-height 3.7vw
                }
                & span {
                    font-size: vw(8);
                    line-height vw(12)
                }
                & img {
                    width: vw(60)
                    height: vw(60)
                }
            }
        }
    }

</style>
